<template>
	<div class="box-card">
		<div class="EchartPractice1">
			<el-date-picker
			      v-model="value3"
			      type="month"
				  placeholder="请选择月份"
				  format="yyyy-MM"
				  value-format="yyyy-MM-dd HH:mm:ss"
				  class="pickernumber"
				  @change="pickerUnit"
				  style="width: 200px;">
			    </el-date-picker>
		    <div id="main1"></div>
		</div>
		<div class="EchartPractice2">
			<el-date-picker
			      v-model="value1"
			      type="monthrange"
			      range-separator="至"
			      start-placeholder="开始月份"
			      end-placeholder="结束月份"
				  format="yyyy-MM-dd"
				  value-format="yyyy-MM-dd HH:mm:ss"
				  class="pickernumber"
				  @change="pickernumber">
			    </el-date-picker>
		    <div id="main2"></div>
		</div>
		<div class="EchartPractice3">
			<el-date-picker
			      v-model="value2"
			      type="monthrange"
			      range-separator="至"
			      start-placeholder="开始月份"
			      end-placeholder="结束月份"
				  format="yyyy-MM-dd"
				  value-format="yyyy-MM-dd HH:mm:ss"
				  class="pickerchange"
				  @change="pickerchange">
			    </el-date-picker>
		    <div id="main3"></div>
		</div>
	</div>
</template>

<script>
	import { getNumberChange,getMonthNumber,getThisMonthNumber,getMonthUnitnumber,getExcelTable } from "@/api/unit/random";
	import { listUnittype } from "@/api/unit/unittype.js";
	
	export default {
		data() {
			return {
				json_fields: { 
						   }, 
                json_data:[{"userName":"张三","age":18,"phone":15612345612,"createTime":"2019-10-22"}],
				options: [{
				          value: null,
				          label: null
				        }, {
				          value: null,
				          label: null
				        }, {
				          value: null,
				          label: null
				        }, {
				          value: null,
				          label: null
				        }, {
				          value: null,
				          label: null
				        }, {
				          value: null,
				          label: null
				        }, {
				          value: null,
				          label: null
				        }, {
				          value: null,
				          label: null
				        }, {
				          value: null,
				          label: null
				        }],
				monthItems: [{
					value:'统计月份1'
				},
				{
					value:'统计月份2'
				},
				{
					value:'统计月份3'
				},
				{
					value:'统计月份4'
				},
				{
					value:'统计月份5'
				},
				{
					value:'统计月份6'
				},
				{
					value:'统计月份7'
				},
				{
					value:'统计月份8'
				},
				{
					value:'统计月份9'
				},
				{
					value:'统计月份10'
				},{
					value:'统计月份11'
				},{
					value:'统计月份12'
				}],
						value3: [],
				//时间选择器
				value1: '',
				//统计时间选择器
				value4: '',
				//统计库选择器
				value5: '',
				//时间选择器
				value2: '',
				value3: '',
				arr1:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
				arrY1:[],
				arr2:["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],
				arrY2:[],
				arrY3:[],
				thisMonthArr:[],
				//时间实体类
				timeform:{
					createTime:"",
					updateTime:"",
					unitTypeId:null
				},
			}
		},
		name: "EchartPractice",
		created() {
			this.getunitTypeId();
		},
		    methods:{
				//获取库名称与id
				getunitTypeId(){
					listUnittype().then(response => {
					for(var m=0;m<response.rows.length;m++){
						this.options[m].value = response.rows[m].unittypeId.toString();
						this.options[m].label = response.rows[m].unittypeName;
					}
				  });
				},
				//库下抽取单位数量
		      drawChart1() {
		        let myEchart1 = this.$echarts.init(document.getElementById("main1"));
						//配置项
		        let option1 = {
		          title:{
		            text:"当月库下抽取单位数量"
		          },
		          tooltip:{},
		          legend:{
		            data:["单位数量"]
		          },
		          xAxis:{
					type: 'category',
		            data: ["招标代理","施工图审查","预结算","工程财务决算","工程设计","工程勘察","工程监理","工程检测单位","预结算(跟踪审计)"],
		            axisLabel:{
		            			interval:0,
		            			rotate:-30
		            			}
		          },
		          yAxis:{
					  type:'value',
					  scale:true,
					  minInterval: 1 
				  },
		          series:[{
		            name:'数量',
		            type:"bar",
		            data:this.thisMonthArr
		          }]
		        };
		        myEchart1.setOption(option1);
		      },
			  //抽取单位数量
			  drawChart2() {
			    let myEchart2 = this.$echarts.init(document.getElementById("main2"));
					//配置项
			    let option2 = {
			      title:{
			        text:"每月抽取单位数量"
			      },
			      tooltip:{},
			      legend:{
			        data:["单位数量"]
			      },
			      xAxis:{
			  		type: 'category',
			        data: this.arr1
			      },
			      yAxis:{
			  		type:'value',
					minInterval: 1
			  			},
			      series:[{
			        name:'数量',
			        type:"bar",
			        data:this.arrY1,
					barWidth:30,
			      }]
			    };
			    myEchart2.setOption(option2);
			  },
			  // 单位数量变化曲线
			  drawChart3() {
			    let myEchart3 = this.$echarts.init(document.getElementById("main3"));
				let usersArr = [50,60,45,30,20,30,50,60,10,30,25,50];
					//配置项
			    let option3 = {
			      title:{
			        text:"抽取单位数量变化曲线"
			      },
			      tooltip:{},
			      legend:{
			        data:["单位数量"]
			      },
			      xAxis:{
			  		type: 'category',
			        data: this.arr2,
					boundaryGap:false
			      },
			      yAxis:{
			  		type:'value',
					minInterval: 1
			  		},
			      series:[{
			        name:'数量',
			        type:"line",
			        data:this.arrY2,
					smooth: true
			      }]
			    };
			    myEchart3.setOption(option3);
			  },
			  pickernumber(val){
				  var that = this;
				  this.timeform.createTime=val[0];
				  this.timeform.updateTime=val[1];
				  getMonthNumber(this.timeform).then(response => {
					var newarr1 = [];
					var twoArrYArr5 = [];
					for(var h=0;h<response.data.length;h++){
				   twoArrYArr5.push(response.data[h].random_unit_name);
				   newarr1.push(response.data[h].create_time + "月");
					that.arrY1=twoArrYArr5;
					that.arr1=newarr1;
					}
				  this.drawChart2();
				  });
			  },
			  pickerchange(val){
				  var that = this;
				  this.timeform.createTime=val[0];
				  this.timeform.updateTime=val[1];
				  getMonthNumber(this.timeform).then(response => {
					var newarr2 = [];
					var twoArrYArr6 = [];
					for(var j=0;j<response.data.length;j++){
					twoArrYArr6.push(response.data[j].random_unit_name);
					newarr2.push(response.data[j].create_time + "月");
					that.arrY2=twoArrYArr6;
					that.arr2=newarr2;
					}
					this.drawChart3();
				  });
			  },
			  tableChange(val){
				  this.timeform.createTime=val[0];
				  this.timeform.updateTime=val[1];
			  },
			  /** 导出按钮操作 */
			  tablemake() {
				  var that = this;
				this.timeform.unitTypeId = this.value5.join(',');
				//const filName = "抽签统计表"
			    this.$confirm('是否确认导出抽签统计表?', "警告", {
			        confirmButtonText: "确定",
			        cancelButtonText: "取消",
			        type: "warning"
			      }).then(async function() {
			        const res = await getExcelTable(that.timeform);
					const blob = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8"});
					const url = window.URL.createObjectURL(blob);
					const aEle = document.createElement("a")
					aEle.href = url;
					aEle.download = "抽签统计表"
					aEle.click()
			      })
			  },
			  pickerUnit(val){
				  var that = this;
				  this.timeform.createTime=val;
				  getMonthUnitnumber(this.timeform).then(response => {
					var twoArrYArr7 = [];
					for(var k=0;k<response.data.length;k++){
					twoArrYArr7.push(response.data[k].randomUnitCount);
					}
					this.thisMonthArr=twoArrYArr7;
					this.drawChart1();
				  });
			  },
			  thismontharrFun(){
				  getMonthUnitnumber(this.timeform).then(response => {
				  	for(var x=0;x<response.data.length;x++){
						this.thisMonthArr.push(response.data[x].randomUnitCount);
					}
					this.drawChart1();
				  });
			  },
			  twoArrY(){
				  var that = this;
				  getMonthNumber(this.timeform).then(response => {
  					var twoArrYArr1 = [];
					var twoArrYArr2= [];
  					for(var i=0;i<response.data.length;i++){
  		                 twoArrYArr1.push(response.data[i].random_unit_name);
						 twoArrYArr2.push(response.data[i].create_time + "月");
  						that.arrY1=twoArrYArr1;
						that.arr1=twoArrYArr2;
				  }
				  this.drawChart2();
				  });
			  },
				therrArrY(){
					var that = this;
					getMonthNumber(this.timeform).then(response => {
						var twoArrYArr3 = [];
					  var twoArrYArr4= [];
						for(var s=0;s<response.data.length;s++){
					        twoArrYArr3.push(response.data[s].random_unit_name);
							twoArrYArr4.push(response.data[s].create_time + "月");
							that.arrY2=twoArrYArr3;
							that.arr2=twoArrYArr4;
					}
					this.drawChart3();
					});
				},
		    },
		    mounted() {
			  this.thismontharrFun();
			  this.twoArrY();
			  this.therrArrY();
		    }
	}
</script>

<style lang="scss" scoped>
	.box-card{
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	#main1,#main2,#main3 {
	    width: 600px;
	    height:400px;
		margin-top: 20px;
	  }
	  .pickernumber,.pickerchange{
		  margin-top: 20px;
	  }
</style>
